*{
    margin:0%;
    padding:0%;
    box-sizing: border-box;
   
}

html,body{
  background-color: black;
    height: 100%;
    width:100%;
    background-color: brown;
}



.logo1{

    width:100%;
   margin-left: 4%;
   display: flex;

}



h4{

    color:goldenrod;
    font-size: 15px;
}

.logo{


    width:100%;
    display: flex;
}

nav{
    background-color: red;
     
    }

    

    
ul{

    background-color: whitesmoke;
 }
 a{
  margin-left: 30px;
 font-family:𝐇𝐎𝐌𝐄;
 font-size: 20px;
 }
 
 a:hover{
 
    transform: scale(1.1,1.1);
 }

 span{

    color: bisque;
    text-align: center;
 }
 

.d1{
    color:black;
     height: 50%;
     width:100%;
    
     background-color: grey;
     display: flex;
 }
 
 .d1:hover{
 
     transform: translatey(-10%);
     backdrop-filter: blur("90%");
 }
 .box1{
 
     height: 100%;
     width: 40%;
     background-size: cover;
 }
 
 .box2{
     height: 100%;
     width:60%;
     padding: 10px;
    
 }
 
.d2{
    height: 100%;
    width: 100%;
    background-color: brown;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



button{
    padding:10px;
    border:none;
    background-color: rgb(189, 118, 66);
    color:beige;
   
}

button:hover{

    background-color: rgb(9, 62, 32);
    color: bisque;
}


.brand-name{
    color: bisque;
    text-align: center;
    background-color: brown;
    }